<template>
  <div class="app-container">
    <el-row :gutter="24" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="chart-card-header">
            <div class="meta">
              <div class="chart-card-title">订单总额</div>
            </div>
            <div class="total">
              <span>{{ stat.order.cur }}</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <div class="chart-trend">
                <span>
                  <span>月同比</span>
                  <span class="item-text">{{ stat.order.rate }}%</span>
                </span>
                <span :class="stat.order.incre == true ? 'up': 'down'">
                  <i class="icon icon-caret-up">
                    <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                      <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                    </svg>
                  </i>
                </span>
              </div>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              上月总额
              <span>{{ stat.order.total }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="chart-card-header">
            <div class="meta">
              <div class="chart-card-title">实收总额</div>
            </div>
            <div class="total">
              <span>{{ stat.actual.cur }}</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <div class="chart-trend">
                <span>
                  <span>月同比</span>
                  <span class="item-text">{{ stat.actual.rate }}%</span>
                </span>
                <span :class="stat.actual.incre == true ? 'up': 'down'">
                  <i class="icon icon-caret-up">
                    <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                      <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                    </svg>
                  </i>
                </span>
              </div>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              上月实收
              <span>{{ stat.actual.total }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="chart-card-header">
            <div class="meta">
              <div class="chart-card-title">退费总额</div>
            </div>
            <div class="total">
              <span>{{ stat.refund.cur }}</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <div class="chart-trend">
                <span>
                  <span>月同比</span>
                  <span class="item-text">{{ stat.refund.rate }}%</span>
                </span>
                <span :class="stat.refund.incre == true ? 'up': 'down'">
                  <i class="icon icon-caret-up">
                    <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                      <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                    </svg>
                  </i>
                </span>
              </div>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              上月退费
              <span>{{ stat.refund.total }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="chart-card-header">
            <div class="meta">
              <div class="chart-card-title">本月课收</div>
            </div>
            <div class="total">
              <span>{{ stat.course.cur }}</span>
            </div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <div class="chart-trend">
                <span>
                  <span>月同比</span>
                  <span class="item-text">{{ stat.course.rate }}%</span>
                </span>
                <span :class="stat.course.incre == true ? 'up': 'down'">
                  <i class="icon icon-caret-up">
                    <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                      <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                    </svg>
                  </i>
                </span>
              </div>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              上月课收
              <span>{{ stat.course.total }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机构财务数据</span>
          </div>
          <div class="text item">
            <ve-line :data="chartData"></ve-line>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getFinanceStat, getFinanceOverview } from '@/api/order'

export default {
  data() {
    return {
      rows: [],
      chartData: {},
      stat: {}
    }
  },
  mounted: function() {
    // 获取数据
    const para = {
      size: 12
    };
    getFinanceOverview(para).then(res => {
      this.buildRows(res.data.months, res.data.series)
      this.chartData = {
        columns: ['月份', '应收总额', '实收总额', '退费总额', '课收总额'],
        rows: this.rows
      }
    });
    getFinanceStat().then(res => {
      this.stat = res.data
    })
  },
  methods: {
    buildRows(months, series) {
      for(let i = 0; i < months.length; i++) {
        this.rows.push({
          '月份': months[i],
          '应收总额': series[0][i],
          '实收总额': series[1][i],
          '退费总额': series[2][i],
          '课收总额': series[3][i]
        })
      }
    }
  }
}

</script>
<style lang="css" scoped>
</style>
